<style lang="scss" scoped>
    .item {
        img {
            width: 375px;
        }
    }
    
    .common-title {
        margin: 27px 0 16px 0;
        &.title-2 {
            margin: 34px 0 16px 0;
        }
    }
    
    .destination-swiper {
        padding-left: 28px;
        .slide-items {
            width: 200px;
            .dest-items {
                position: relative;
                width: 100%;
                border-radius: 6px; /*no*/
                overflow: hidden;
                .dest-link {
                    display: block;
                    font-size: 0;
                }
                .mask {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background: rgba(0, 0, 0, 0.21);
                }
                .city, .city-en {
                    position: absolute;
                    font-size: 16px;
                    left: 24px;
                    bottom: 36px;
                    color: #ffffff;
                }
                .city-en {
                    font-size: 10px;
                    bottom: 22px;
                }
                .destImg {
                    width: 200px;
                }
                &.items {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                    .destImg {
                        width: 200px;
                    }
                }
                &.items:nth-child(1) {
                    height: 145px;
                    margin-bottom: 10px;
                }
                &.items:nth-child(2) {
                    height: 102px;
                }
            }
        }
    }
    
    .offer-swiper {
        padding-left: 28px;
        margin-bottom: 57px;
        .slider-item {
            width: 320px;
            .link {
                display: block;
            }
            .offerImg {
                width: 320px;
                border-radius: 6px; /* no */
            }
            .desc {
                font-size: 14px;
                margin-top: 8px;
                padding-left: 7px;
            }
        }
    }
</style>

<template>
    <div class="index-wrap">
        <mt-swipe :auto="0">
            <mt-swipe-item class="item">
                <img src="/static/kv.png" alt="">
            </mt-swipe-item>
            <mt-swipe-item class="item">
                <img src="/static/kv.png" alt="">
            </mt-swipe-item>
            <mt-swipe-item class="item">
                <img src="/static/kv.png" alt="">
            </mt-swipe-item>
        </mt-swipe>
        
        <h2 class="common-title"><span>热门目的地</span></h2>
        <swiper class="destination-swiper" ref="destination-swiper" :options="swiperOption">
            <swiper-slide v-for="(item,j) in destinations" :key="'swiper'+j" class="slide-items">
                <div class="dest-items" :class="{items: item.length > 1}" v-for="(dest,i) in item" :key="i">
                    <router-link :to="{path: '/'}" class="dest-link">
                        <img :src="dest.imgurl" class="destImg">
                        <div class="mask"></div>
                        <p class="city">{{ dest.city }}</p>
                        <p class="city-en">{{ dest.cityEn }}</p>
                    </router-link>
                </div>
            </swiper-slide>
        </swiper>
        <h2 class="common-title title-2"><span>优惠享不停</span></h2>
        <swiper class="offer-swiper" ref="offer-swiper" :options="offerSwiper">
            <swiper-slide v-for="(item,i) in offer" class="slider-item" :key="i">
                <router-link :to="{path:''}" class="link">
                    <img :src="item.imgurl" class="offerImg">
                    <p class="desc">{{ item.desc }}</p>
                </router-link>
            </swiper-slide>
        </swiper>
        <div class="external-link">
            <img src="/static/footer-logo.png" alt="">
        </div>
        <footer-component activeItem="price" :priceNum="100" :showFooter="showFooter"></footer-component>
    </div>
</template>

<script>
    import FooterComponent from '@/views/footer'
    export default {
        components: {
            FooterComponent
        },
        beforeRouteEnter(to, from, next) {
            next();
        },
        computed: {},
        data() {
            return {
                showFooter: false,
                swiperOption: {
                    slidesPerView: 'auto',
                    spaceBetween: 10,
                    pagination: {
                        clickable: true
                    }
                },
                offerSwiper: {
                    slidesPerView: 'auto',
                    spaceBetween: 18,
                    pagination: {
                        clickable: true
                    }
                },
                destinations: [],
                dest: [
                    
                    {
                        imgurl: '/static/hn.png',
                        city: '海南',
                        cityEn: 'Sanya'
                    },
                    
                    
                    {
                        imgurl: '/static/hn.png',
                        city: '香港',
                        cityEn: 'Hongkong'
                    },
                    {
                        imgurl: '/static/hn.png',
                        city: '北京',
                        cityEn: 'Beijng'
                    },
                    
                    
                    {
                        imgurl: '/static/hn.png',
                        city: '海南',
                        cityEn: 'Sanya'
                    },
                    
                    
                    {
                        imgurl: '/static/hn.png',
                        city: '香港',
                        cityEn: 'Hongkong'
                    },
                    {
                        imgurl: '/static/hn.png',
                        city: '北京',
                        cityEn: 'Beijng'
                    },
                
                ],
                offer: [
                    {
                        imgurl: '/static/offer.png',
                        id: 1,
                        link: 'xxx',
                        desc: '三代同行，有福齐享'
                    },
                    {
                        imgurl: '/static/offer.png',
                        id: 2,
                        link: 'xxx',
                        desc: '三代同行，有福齐享2'
                    },
                    {
                        imgurl: '/static/offer.png',
                        id: 3,
                        link: 'xxx',
                        desc: '三代同行，有福齐享3'
                    },
                    {
                        imgurl: '/static/offer.png',
                        id: 1,
                        link: 'xxx',
                        desc: '三代同行，有福齐享'
                    },
                    {
                        imgurl: '/static/offer.png',
                        id: 2,
                        link: 'xxx',
                        desc: '三代同行，有福齐享2'
                    },
                    {
                        imgurl: '/static/offer.png',
                        id: 3,
                        link: 'xxx',
                        desc: '三代同行，有福齐享3'
                    }
                ]
            };
        },
        mounted() {
            // 数组转换
            this.dest.forEach((item,i) => {
            	if(i%3 === 0){
                    this.destinations.push([item])
                }else if(i%3 === 1){
                    this.destinations.push([this.dest[i],this.dest[i+1]])
                }
            })
            
            
            let _this = this
            window.onscroll = function () {
                if (document.documentElement.scrollTop > 100) {
                    _this.showFooter = true
                } else {
                    _this.showFooter = false
                }
            }
        },
        methods: {}
    };
</script>

